<template>
  <basic-container>
    <!-- START goBack -->
    <div class="el-page-header">
      <div class="el-page-header__left haruyuki-flex-center haruyuki-size-18" @click="goBack" >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content haruyuki-flex-center">
        <el-image
          style="width: 20px; height: 20px"
          src="/img/merchant-icon/rate_mini.png"
          fit="fill"
        ></el-image>
        <span class="haruyuki-ml-6">签约费率</span>
        </div>
    </div>
    <!-- END goBack -->
    <!-- 通道类型 -->
    <div class="passageway_header haruyuki-mt-20">通道类型</div>

    <div class="haruyuki-flex haruyuki-flex-wrap haruyuki-mt-20 haruyuki-mb-20">
      <div :class="['aisle-box-type',activeIndex == index?'active':' ']" v-for="(item,index) in aisleList" :key="index" @click="clickActive(index)">
        <div class="aisle-type-item">
          <img class="aisle-type-logo" src="/img/aisle-logo/ys.png"/>
          <div class="aisle-type-right">
            <div class="aisle-type-title">{{item.aisleName}}</div>
            <div>
              <span :class="[item.isAuthName=='未授权'?'status-color-red':'status-color-green']" v-show="item.isAuthName">{{item.isAuthName}}</span>
              <span class="haruyuki-ml-6" :class="[item.isDefaultName=='未使用'?'status-color-red':'status-color-green']" v-show="item.isDefaultName">{{item.isDefaultName}}</span>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <!-- 通道认证 -->
    <div class="haruyuki-bg-color-white">
      <div class="el-page-header__content" v-loading="loading">
        <div class=" aisle-template haruyuki-flex-space-between haruyuki-align-items-center haruyuki-ptb-10 haruyuki-bg-color-hazeblue " >
          <div class="haruyuki-flex-center haruyuki-plr-20">
            <i class="el-icon-caret-bottom"></i>
            <span class="haruyuki-size-16 haruyuki-ml-20">通道名称：</span>
            <span class="haruyuki-size-16 policy-ml-3 policy-mr-3">{{ aisleName }}</span>
          </div>
        </div>
        <table class="haruyuki-width-100">
          <colgroup>
            <col style="width: 200px; min-width: 200px" /><col />
          </colgroup>
          <tbody >
            <tr class="trWrap" data-row-key="0">
              <td rowspan="3" class="tit line-bottom-fff" >扫码</td>
              <td class="titName line-bottom-bgd ">微信扫码支付：</td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.wechatSignRate)}}%</span>
              </td>
              <td class="line-bottom-bgd"></td>
            </tr>
            <tr class="trWrap" data-row-key="1">
              <td class="titName line-bottom-bgd " >支付宝扫码支付：</td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.alipaySignRate)}}%</span>
              </td>
              <td class="line-bottom-bgd"></td>
            </tr>
            <tr class="trWrap" data-row-key="2">
              <td class="titName line-bottom-bgd " >扫码垫资费费率：</td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.codeAdvanceRate)}}%</span>
              </td>
              <td class="line-bottom-bgd"></td>
            </tr>

            <tr class="trWrap" data-row-key="7">
              <td rowspan="3" class="tit line-bottom-fff">银联二维码</td>
              <td class="titName line-bottom-bgd" >银联二维码小额签约费率：</td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.alipaySignRate)}}%</span>
              </td>
              <td class="line-bottom-bgd"></td>
            </tr>
            <tr class="trWrap" data-row-key="9">
              <td class="titName line-bottom-bgd " >银联二维码借记卡大额签约费率：</td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.debitRate1)}}%</span>
              </td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.debitMax1)}}元封顶</span>
              </td>
            </tr>
            <tr class="trWrap" data-row-key="10">
              <td class="titName line-bottom-bgd " >银联二维码贷记卡大额签约费率：</td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.creditRate1)}}%</span>
              </td>
              <td class="line-bottom-bgd"></td>
            </tr>

            <tr class="trWrap" data-row-key="3">
              <td rowspan="7" class="tit line-bottom-fff">刷卡</td>
              <td class="titName line-bottom-bgd " >刷卡借记卡垫资费费率：</td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.d0AdvanceJsignFee)}}%</span>
              </td>
              <td class="line-bottom-bgd"></td>
            </tr>
            <tr class="trWrap" data-row-key="4">
              <td class="titName line-bottom-bgd " >刷卡贷记卡垫资费费率：</td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.d0AdvanceDsignFee)}}%</span>
              </td>
              <td class="line-bottom-bgd"></td>
            </tr>
            <tr class="trWrap" data-row-key="5">
              <td class="titName line-bottom-bgd " >贷记卡刷卡费率：</td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.t112Rate)}}%</span>
              </td>
              <td class="line-bottom-bgd"></td>
            </tr>
            <tr class="trWrap" data-row-key="6">
              <td class="titName line-bottom-bgd " >借记卡刷卡费率：</td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.t111Rate)}}%</span>
              </td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.d011RateTop)}}元封顶</span>
              </td>
            </tr>
            <tr class="trWrap" data-row-key="8">
              <td class="titName line-bottom-bgd " >云闪付优惠：</td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.waveRate)}}%</span>
              </td>
              <td class="line-bottom-bgd"></td>
            </tr>
            <tr class="trWrap" data-row-key="11">
              <td class="titName line-bottom-bgd " >云闪付大额贷记卡签约费率：</td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.unionpayRate)}}%</span>
              </td>
              <td class="line-bottom-bgd"></td>
            </tr>
            <tr class="trWrap" data-row-key="13">
              <td class="titName line-bottom-bgd " >云闪付大额借记卡签约费率：</td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.unionpayRate)}}%</span>
              </td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.posUnionPayDebitMax)}}元封顶</span>
              </td>
            </tr>
            
            <tr class="trWrap" data-row-key="12">
              <td rowspan="1" class="tit line-bottom-fff">快捷支付</td>
              <td class="titName line-bottom-bgd " >快捷支付：</td>
              <td class="titRate line-bottom-bgd " >
                <span>{{setVal(aisleData.vipRate)}}%</span>
              </td>
              <td class="line-bottom-bgd"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- <el-image-viewer
      style="z-index: 2048"
      v-if="contractQrCodeShow"
      :on-close="()=>{ contractQrCodeShow = false }"
      :url-list="[aisleData.contractQrCode]"
    ></el-image-viewer> -->
  </basic-container>
</template>

<script>
import { queryBasicAisleList, queryAisleRate } from "@/api/rb-oem/posinfo/pos_info_details";

export default {
  components: {},
  data() {
    return {
      id: "",
      rpiNo: "",
      activeIndex:0,
      aisleKind: 0,//2 展示,----不等于2 该通道未开放
      aisleList: [],//通道类型
      aisleData: {},//通道详情
      loading: true,
      aisleName: "", //通道名称
      aisleCode: "", //通道编号
      contractQrCodeShow:false,
    };
  },
  computed: {
    base64() {
      return (val) => {
        if(val){
          if (val.indexOf('data:image/png;base64,') == -1) {
            return ('data:image/png;base64,' + val );
          } else {
            return val;
          }
        }else{
          return ''
        }
      };
    },
    setVal() {
      return (val) => {
        if(val){
          return val
        }else{
          return '0'
        }
      };
    }
  },
  created() {
    this.infoData();
  },
  mounted() {},
  methods: {
    /* 点击设置背景色 获取详情信息 */
    clickActive(index){
      let _this = this;
      this.activeIndex = index;
      this.aisleKind = this.aisleList[index].aisleKind;
      this.aisleName = this.aisleList[index].aisleName;
      this.aisleCode = this.aisleList[index].aisleCode;
      this.loading = true;
      queryAisleRate(this.aisleCode, this.rpiNo).then((res) => {
        _this.aisleData = res.data.data;
        _this.loading = false;
      }).catch(()=>{
        _this.loading = true;
      });
    },
    /* 页面加载 初始化请求 通道费率接口 */
    infoData() {
      this.id = this.$route.query.id;
      this.rpiNo = this.$route.query.rpiNo;
      let _this = this;
      queryBasicAisleList(this.rpiNo).then((res) => {
        _this.aisleList = res.data.data;
        _this.aisleName = _this.aisleList[0].aisleName;
        _this.clickActive(0)
      });
    },
    /* 返回页面 */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    }
  },
};
</script>

<style lang="scss" scoped>
.trWrap{
  width: 100%;
  .tit{
    text-align: center;
    background-color: #e0eafc;
  }
  .titName{
    text-align: center;
    line-height: 40px;
  }
  .titRate{
    text-align: center;
  }
  .line-bottom-fff{
    border-bottom: 1px solid #fff;
  }
  .line-bottom-bgd{
    border-bottom: 1px solid #e0eafc;;
  }
}
tr:hover{
  background-color: #e0eafc !important;
}

.font-size-16 {
  font-size: 16px;
}

.aisle-box-type {
  width: 268px;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 102, 255, .08);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .05);
  cursor: pointer;
  &:nth-child(n+2) {
    margin-left: 14px;
  }
  .aisle-type-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    .aisle-type-logo {
      width: 50px;
      height: 50px;
      margin-right: 14px;
      border-radius: 50px;
    }
    .aisle-type-right {
      display: flex;
      // align-items: center;
      flex-wrap: wrap;
      flex-direction: column;
      .aisle-type-title {
        font-weight: bold;
        font-size: 16px;
      }
    }
  }
}
.active{
  background: rgba(2, 86, 255, .1);
}

.passageway_header {
  padding: 15px;
  border-bottom: 2px solid #E4E7ED;
}
.passageway_content {
  display: flex;
  // border-bottom: 1px solid #e5e5e5;
  border-bottom: 1px solid #E4E7ED;
  font-size: 14px;
  .passageway_content_left {
    padding: 15px 0 15px 15px;
    background: #F8F9FD;
    // background: rgba(2, 86, 255, .1);
    width: 310px;
    text-align: right;
  }
  .passageway_content_right {
    padding: 15px 15px 15px 8px;
  }
}
.passageway_content:last-child {
  border-bottom: none;
  .btnClass{
    margin-top: 20px;
    margin-bottom: 40px;
  }
}
.status-color-green {
  color: #0ac061;
}
.status-color-red{
  color: #FE3F10;
}

.notOpen{
  line-height: 300px;
  text-align: center;
}
.justify-content-btn{
  justify-content: center
}
</style>